import { LogoutOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Menu, Spin } from 'antd';
import { ClickParam } from 'antd/es/menu';
import React from 'react';
import { connect } from 'dva';

import { ConnectProps, ConnectState } from '@/models/connect';
import { MenuModelState } from '@/models/menu';
import HeaderDropdown from '../HeaderDropdown';
import styles from './index.less';
import router from 'umi/router';
import LetterCheck from "../LetterCheck";

export interface GlobalHeaderRightProps extends ConnectProps {
  MenuModelState?: MenuModelState;
  menu?: boolean;
}

const mapStateToProps = (state: any) => ({
  menu: state.menu
});
class AvatarDropdown extends React.Component<GlobalHeaderRightProps> {
  onMenuClick = (event: ClickParam) => {
    const { dispatch } = this.props;
    const { key } = event;
    if (key === 'logout') {
      dispatch({
        type: 'login/logout',
      });
      return;
    } else if (key === 'settings') {
      router.push("/user/accountSetting");
      return;
    }
  };

  render(): React.ReactNode {
    const { menu : { userProfile } } = this.props;
    const {menu: { permissions }} = this.props;
    const isHide = permissions.includes('/creditPlatform/mailManage');
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        <Menu.Item key="settings">
          <SettingOutlined />
          <span>个人设置</span>
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item key="logout">
          <LogoutOutlined />
           <span>退出登录</span>
        </Menu.Item>
      </Menu>
    );
    const avatarSrc = userProfile && userProfile.userHeadImg ? userProfile.userHeadImg : "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png";
    return userProfile ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          {isHide && <LetterCheck />}
          <Avatar size="small" className={styles.avatar} src={avatarSrc} alt="avatar" />
          <span>{userProfile && userProfile.userName ? userProfile.userName : userProfile.accountName}</span>
        </span>
      </HeaderDropdown>
    ) : (
      <Spin size="small" style={{ marginLeft: 8, marginRight: 8 }} />
    );
  }
}
export default connect(mapStateToProps)(AvatarDropdown);
